import { useLocation, Outlet, history } from "umi";
import { ConfigProvider, Tabs } from "antd";
import zhCN from "antd/es/locale/zh_CN";

const items = [
    { label: "加密/解密", key: "/" },
    { label: "散列/哈希", key: "/sanlie_haxi" },
    { label: "UUID", key: "/uuid" },
    { label: "随机字符串", key: "/random_string" },
    { label: "BASE64", key: "/base64" },
    { label: "图片/BASE64转换", key: "/image_base64" },
    { label: "计算文件的HASH", key: "/sha256_md5" },
];

export default function Layout() {
    const location = useLocation();

    return (
        <ConfigProvider locale={zhCN}>
            <div style={{ paddingTop: 30, margin: "0 auto", width: 800 }}>
                <Tabs type="card" activeKey={location.pathname} items={items} onChange={(key) => history.replace(key)}></Tabs>
                <Outlet />
            </div>
        </ConfigProvider>
    );
}
